JavaScript

Prerequisites
- Roles of HTML5, CSS3, and JavaScript

Motivations
- You have used JavaScript for simple examples.
- It is about the time to learn more topics in JavaScript.
- For example, functions, objects, arrays, and the runtime environment.

JavaScript Tutorial

An example: menu for TruQA
- - Sign In
  - Join
  - Forgot Password
Welcome!

Sign In

Username:

Password:

Why do we need a programming lanaguage in a web app?
- User interaction: events, inputs, outputs
- Exchange data with server side scripts
- File i/o
- Access to devices such as camera
- ...

Basics
- Anywhere within <script> and </script>; Multiple scripts share the same memory space.
- JavaScript is a loosely typed programming language.
- Code block: { ... }
- Declaration of variables and constants: var, let, const; Let's not use var variables except when you need them for testing. Let's use let. (Note that you cannot redeclare the same let variables.)
```
{
    const PI = 3.14159;
    let radius = prompt("Enter a number: ");  // or window.prompt(...)
    let circumference;
    circumference = 2 * PI * radius;
    alert(circumference);  // or window.alert(...)
}
```
- Trial 0.01: Let's write the code that reads diameter, computes area, and prints the result using alert().
  <???> ???? </script>
- Operators:
  - Arithmetic operators: ..., %, **
  - Comparision operators: ...
  - Assignment operators: ...
  - Function invocation: ...
  - String concatenation: +
  - Object membership: .
```
    document.getElementById('modal-login').style.display = 'block';
```
- Selection structures - if, if-else, if-else if-else, switch
- Loop structures - for, while, do-while
- If you think you don't remember much about the Basics, you may visit JavaScript Tutorial and study them.
- Run-time environment: Web browser
  - Window is represented by window object.
    - window.promt() or just promt()
    - window.alert() or just alert()
    - window.document or just document
  - Document Object Model (DOM) is a tree like data struncture that includes all the HTML elements. DOM is representd by the object document.
    - document.getElementById("target").style.backgroundColor = "Cyan";
    - alert(document.getElementById("target").innerHTML);
    - ```
    <button id='target'>Click me!</button>
    <div id='display'>Message here</div>
    <script>
        document.getElementById("target").addEventListener("click", function() {  // "click" event listener
            document.getElementById("display").innerHTML = "Interesting!";
        });
    </script>
```
- Trial 0.02: Try the above example.

Read all in JavaScript Functions.
- For what do we use functions?
  Modular programming
- Function used as a variable value - How are 'toCelsius()' and 'toCelsius' different in the 4th example?
- Function object in the 4th example? This is very interesting.
- Can you assign a function to a variable? If so, how to use the function variable?
- Trial 0.1: Let's write a function to check if a given number is a prime number. You need to include the code to test the function as well. Note that a prime number is a natural number and is divisible only by 1 and itself. You may use % operator.
  <???> ???? { let n = ???("Enter a non-negative integer: "); // from the user let result = ???? alert(result); } </script>
- Trial 0.2: Let's write a function to compute Fibonacci number, and test the function with a number read from the user. (Don't test the function with any number larger than 40.)
  Fibonacci numbers: 0, 1, 1, 2, 3, 5, 8, ...; F(0)=0, F(1)=1, F(n)=F(n-2)+F(n-1) for n >= 2
  <???> ???? { let n = prompt("Enter a non-negative integer: "); let result = ???? alert(result); } </script>

Read all in JavaScript Objects.
- What do real life objects contain?
- What do JavaScript objects contain?
- How to define an object?
- What are object properties?
- What is a method?
- Give two different styles to access object properties.
- Give two different styles to access object methods.
- How to add methods into an object?
- Trial 0.3: Let's write a function that have two parameters, a name and an id, and it creates/returns a Student object that includes the name the id. Test the function. The Student object includes two properties - name and id, and two methods - getName() and setName().
  <script> ???? { let name = "John"; let id = 12345; const student = ???? student.setName('Tom'); alert(student.getName() + ", " + student["id"]); alert(student.getName + ", " + student.id); } </script>

Read all in JavaScript Scope.
- What is the function of the var keyword and when to use it (or omit it)?
  - In the global scope, there's no difference.
  - In a local scope, 'var' will create a local variable, and no 'var' will look up the scope chain until it finds the variable or hits the global scope (at which point it will create it).
  - Here is an example.
```
// These are both globals.
let foo = 1;
var bar = 2;

function test() {
    let foo = 1; // Local
    bar = 1;     // Global

    // Execute an anonymous function. Isn't it interesting?
    (function() {
        let wibble = 1; // Local
        foo = 3; // Inherits from scope above (creating a closure)
        moo = 3; // Global??? You should be careful with this.
    })();
    
    alert(foo);
    alert(bar);
    alert(moo);
    alert(wibble);
}

test();
```
- Study closely the code of the last example, window.carName, in the above link.
- What object is used for the global scope? What if a property of the object is overwritten?
- Trial 1: Let's try the above example. Can you see five alert windows? If not, why not?
  <???> let foo = 1; bar = 1; function test() { let foo = 2; // Local bar = 2; // Global // Execute an anonymous function. Isn't it interesting? (???() { let wibble = 1; // Local foo = 3; moo = 3; })???; alert('foo = ' + foo); // ??? alert('window.foo = ' + window.foo); // ??? alert('bar = ' + bar); // ??? alert('moo = ' + moo); // ??? alert('wibble = ' + wibble); // ??? } test(); </script>

Read all in JavaScript Arrays.

How to create an array?
List the two different styles of array creation.
Can you put different objects to one array?
How are arrays different from objects?
List some built-in array properties and methods.
How to add a new element to an array?
Are arrays with named indexes, i.e., associative arrays, supported?
Here is one thing that you really need to be careful. If you use a named index, when accessing an array, JavaScript will redefine the array to a standard object, and all array methods and properties will produce undefined or incorrect results. Study closely the 11th example.
But try the 11th example after you add person[2] = 'Dave';. What do you see?
What is the difference between arrays and objects?
The reason not to use 'new Array(...)'. Study closely the 13^th example.
How do you know if a variable is an array or object?

Comparison of linear arrays and objects:

Linear arrays	Objects (associative arrays)
`const x = [];`	`const o = {};`
`x[2] = "Wow!";`	`o.today = "Friday"; o["today"] = "Saturday"; let p = "today"; o[p] = "Monday";`
`delete x[1];`	`delete o.another;`
`for(let i = 0; i < x.length; i++) alert(x[i]);`	`for (let p in o) alert(p + ":" + o[p]);`

Read all in JavaScript For In Loop.
- Trial 1.1: Let's write a function that has a parameter of an object and returns a string for the content of the object, and let's test the function. You need to use for-in loop to go through all the properties in an object.
  <script> ???? function createStudent(name, id) { return { name: name, id: id, getName: function() { return this.name; }, setName: function(new_name) { this.name = new_name; } } } { const student = createStudent('John', 12345); document.getElementById('tr1-1-doit').???('click', function() { // When the button is clicked, print students. let str = ???(student); // obtain a string from the above function to print student document.getElementById('tr1-1-result').??? = str; }); } </script> <button id = 'tr1-1-doit'>Just do it!</button> <p id = 'tr1-1-result'>Result here!</p>
- Trial 1.2: Let's write a function that has a parameter of an array of objects and returns a string for the content of the array, and let's test the function. You need to use for-in loop for objects.
  <script> ???? function createStudent(name, id) { return { name: name, id: id, getName: function() { return this.name; }, setName: function(new_name) { this.name = new_name; } } } { const students = []; // empty linear array students[0] = createStudent('John', 12345); students[1] = createStudent('Tom', 45622); document.getElementById('tr1-2-doit').???('click', function() { // When the button is clicked, print students. let str = ???(students); // obtain a string from the above function to print students document.getElementById('tr1-2-result').???? = str; }); } </script> <button id = 'tr1-2-doit'>Just do it!</button> <p id = 'tr1-2-result'>Result here!</p>

Here are some very useful methods. JavaScript Array Methods (linear arrays).

New features in the latest revisions (We won't use these new features except let and const in this course.)
- ES6 (ECMAScript 2015) - The second major revision
  - The let keyword
  - The const keyword
  - Arrow functions
  - Promise
  - Default parameter values
  - Template literals using `...`
  - ...
- JS 2016 (ECMAScript 2016)
- JS 2017 (ECMAScript 2017)
  - Async functions
  - ...
- JS 2018 (ECMAScript 2018)
  - Asynchronous iteration
  - Promise finally
  - ...

3.0 Something More About JavaScript

Welcome!

Sign In